css battle tesseract

<div></div>
<style>
  body {
    background: linear-gradient(
      #222730 25%, 
      #4CAAB3 25% 75%, 
      #222730 75%
    );
  }

  div {
    margin: 125px auto; 
    border-radius: 50%; 
    width: 50px;
    height: 50px;
    background: #393E46;
  }

  div::before {
    position: fixed; 
    content: "";
    background: #4CAAB3;
    z-index: -1;
    margin: -50px -50px;
    width: 150px; 
    height: 150px; 
    transform: rotate(45deg);
    box-shadow: 0 0 0 50px #222730; 
  }  

</style>